<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>Account Profile</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<span th:fragment="sessions">
        <script type="text/javascript">
            ((material, bootstrap) =>
                document.addEventListener("DOMContentLoaded", () => {
                    $("#sessionsTable").DataTable();
                    let dialogId = "sessions-dialog";
                    let dialog = material ?
                        material.dialog.MDCDialog.attachTo(document.getElementById(dialogId)) :
                        new bootstrap.Modal(document.getElementById(dialogId), {});
                    document.getElementsByName("viewSessionDetails").forEach(btn =>
                        btn.addEventListener("click", event => {
                            let caller = event.target || event.srcElement;
                            let json = $(caller).next("span").text().trim();
                            $("#sessionDetails").text(json);
                            hljs.highlightAll();
                            dialog[material ? "open" : "show"]();
                            event.preventDefault();
                        }, false));
                }))(window.mdc ? mdc : null, window.bootstrap ? bootstrap : null);
        </script>

        <div class="mdc-dialog modal" id="sessions-dialog" role="alertdialog"
             aria-modal="true" aria-labelledby="session-dialog-title" aria-describedby="session-dialog-content">
            <div class="mdc-dialog__container w-100 modal-dialog">
                <div class="mdc-dialog__surface mw-100 modal-content">
                    <h1 class="mdc-dialog__title mt-lg-2 modal-header" id="session-dialog-title">
                        Entry Details
                    </h1>
                    <div class="mdc-dialog__content modal-body" id="session-dialog-content">
                        <p>Here are the details for this record entry.</p>
                        <pre><code id="sessionDetails" class="border-rounded language-json">Text</code></pre>
                    </div>
                    <footer class="mdc-dialog__actions modal-footer">
                        <button type="button" class="mdc-button mdc-button--outline btn btn-outline-secondary"
                                data-mdc-dialog-action="accept" data-mdc-dialog-button-default data-bs-dismiss="modal">
                            <span class="mdc-button__label">Close</span>
                        </button>
                    </footer>
                </div>
            </div>
            <div class="mdc-dialog__scrim"></div>
        </div>

        <div class="profile-content w-100 mdc-data-table table-responsive"
             style="display: none; border-width: 0px;"
             id="divSessions">
            <h2>
                <i class="mdi mdi-human-greeting-variant fas fa-door-open" aria-hidden="true"></i>
                <span>Hello,
                    <span th:if="${authentication.principal.attributes['displayName'] != null}"
                          th:text="${authentication.principal.attributes['displayName'][0]}" />
                    <span th:if="${authentication.principal.attributes['displayName'] == null}"
                          th:text="${authentication.principal.id}"/>
                </span>
            </h2>
            <div class="text-justify">
                <p th:utext="#{screen.account.sessions}">Sessions</p>
            </div>

            <table id="sessionsTable" class="mdc-data-table__table table table-striped noborder">
                <thead>
                <tr class="mdc-data-table__header-row">
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Principal</th>
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">IP Address</th>
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Location</th>
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">User Agent</th>
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Date</th>
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col"></th>
                </tr>
                </thead>
                <tbody class="mdc-data-table__content">

                <tr th:each="entry : ${singleSignOnSessions}" class="mdc-data-table__row">
                    <td class="mdc-data-table__cell" th:utext="${entry.principal}">Value</td>
                    <td class="mdc-data-table__cell" th:utext="${entry.clientIpAddress}">Value</td>
                    <td class="mdc-data-table__cell" th:utext="${#strings.abbreviate(entry.geoLocation, 30)}">Value</td>
                    <td class="mdc-data-table__cell" th:utext="${#strings.abbreviate(entry.userAgent, 30)}">Value</td>
                    <td class="mdc-data-table__cell" th:utext="${entry.authenticationDate}"></td>

                    <td class="mdc-data-table__cell">
                        <form id="fm1" method="post" th:action="@{/account}">
                            <div class="d-flex">
                                <button name="viewSessionDetails" th:if="${entry.payload}"
                                        class="mdc-button mdc-button--raised me-2 btn btn-link min-width-48x" type="button">
                                    <i class="mdi mdi-account-details fas fa-eye" aria-hidden="true"></i>
                                    <span style="display: none" th:utext="${entry.payload}"/>
                                </button>
                                <button class="mdc-button mdc-button--raised me-2 btn btn-link text-danger min-width-48x">
                                    <i class="mdi mdi-delete fas fa-trash" aria-hidden="true"></i>
                                </button>
                            </div>
                            <input type="hidden" name="execution" th:value="${flowExecutionKey}" />
                            <input type="hidden" name="id" th:value="${entry.id}" />
                            <input type="hidden" name="_eventId" value="deleteSession" />
                        </form>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </span>
</body>

</html>
